<!--
 * @Author: wwssaabb
 * @Date: 2021-01-23 16:44:09
 * @LastEditTime: 2021-11-17 10:47:48
 * @FilePath: \echarts_demoe:\myProject\sass_demo\index.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        user-select: none;
      }

      body {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #000;
      }

      .wrap {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        width: 40vw;
        height: 40vw;
        padding: 3vw 0 0;
        border-radius: 2vw;
        border: 0.05208vw solid #fff;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        transition: 1s;
        overflow: auto;
      }

      .wrap::-webkit-scrollbar {
        display: none;
      }

      .wrap:hover {
        animation: blink_bs 2.5s linear infinite;
      }

      @keyframes blink_bs {
        0% {
          box-shadow: none;
        }

        50% {
          box-shadow: 0 0 1.2vw rgba(255, 255, 255, 0.5);
        }

        100% {
          box-shadow: none;
        }
      }

      .btn {
        position: relative;
        width: 70%;
        height: auto;
        padding: 0.52083vw 1.04167vw;
        margin-bottom: 3vw;
        display: flex;
        justify-content: center;
        align-items: center;
        font: 1.5625vw/2.08333vw fantasy;
        font-weight: bold;
        letter-spacing: 0.10417vw;
        color: #000;
        border-radius: 1vw;
        cursor: pointer;
        background-image: linear-gradient(
          90deg,
          #6ebbff,
          #b696d1,
          #df688a,
          #b696d1,
          #6ebbff
        );
        background-size: 400%;
        flex-shrink: 0;
      }

      .btn::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 1vw;
        background-size: 400%;
        filter: blur(0.52083vw) contrast(5);
        z-index: -1;
      }

      .btn:hover {
        color: #fff;
        animation: moveX 15s linear infinite;
        text-shadow: 0 0 0.52083vw #000;
      }

      .btn:hover::after {
        background-image: linear-gradient(
          90deg,
          #749fc5,
          #a875d4,
          #ff8bac,
          #a875d4,
          #749fc5
        );
        transition: 0.5s;
        animation: moveX 15s linear infinite;
      }

      @keyframes moveX {
        0% {
          background-position: 0;
        }

        100% {
          background-position: 400%;
        }
      }
    </style>
  </head>

  <body>
    <div class="wrap"></div>

    <script>
      let arr = [
        "烟花",
        "导航栏",
        "anime",
        "Buttons Cyberpunk",
        "Radio Tab",
        "Progress Bar",
        "Visual Block",
        "Check Box",
        "3D Block",
        "Endless Tunnel",
        "Focus Picture Switch",
        "Text drop",
        "Smoke Text",
        "Visual staggered2",
        "Buttons",
        "Background blur",
        // 'Visual staggered',
        "Text effects",
        "打钩动画",
        //'Infinite Rotating',
      ];
      let wrap = document.getElementsByClassName("wrap")[0];
      let btnArr = document.createDocumentFragment();
      arr.forEach((a) => {
        let btn = document.createElement("div");
        btn.className = "btn";
        btn.innerText = a;
        btn.addEventListener("click", () => {
          location.href = "./" + a + "/index.html";
        });
        btnArr.appendChild(btn);
      });
      wrap.appendChild(btnArr);
    </script>
  </body>
</html>
